<template>
  <div class="c-bg-sgray">
    <my-small-tabbar id="tabhBar" :tabList="barList" :tabIndex="type" @changeTab="changeType" class="c-bg-white"></my-small-tabbar>
    <div class="c-ph24">
      <div class="c-mt20 c-bg-white c-ph20 c-pv20 c-br10" v-for="(item,index) in exchangeList" :key="index">
        <div class="c-fs24 c-fc-xblack">劵码：{{item.rcdId}}</div>
        <div class="c-fs24 c-fc-xblack c-mt2">领取人：{{item.nickname}}<span v-if="item.recipientUserId">(ID:{{item.recipientUserId}})</span></div>
        <div class="c-fs24 c-fc-xblack c-mt2">领取时间：{{item.receivedAt ? item.receivedAt.replace(/-/g,'.') : ''}}</div>
        <div class="c-fs24 c-fc-xblack c-mt2" v-if="type == 2 && item.useStatus == 1">使用时间：{{item.usedAt ? item.usedAt.replace(/-/g, '.') : ''}}</div>
        <div class="c-fs24 c-fc-xblack c-mt2" v-if="type == 3 && item.status == 4">过期时间：{{item.endAt ? item.endAt.replace(/-/g, '.') : ''}}</div>
        <div class="c-fs24 c-fc-xblack c-mt2" v-if="fromType == 'shareholder' &&type == 2 && item.useStatus == 1">使用商品：{{item.prodName}}</div>
        <div class="c-fs24 c-fc-xblack c-mt2 c-flex-row c-justify-sb">
          <span></span>
          <span class="theme-fc" v-if="item.userId && item.isCustomer" @click="goCustomDetail(item.userId)">查看客户</span>
        </div>
      </div>
    </div>
    <div v-if="is_page" @click="getMore" class="c-pv20 c-textAlign-c c-fc-gray c-fs24">
      点击加载更多&nbsp;>
    </div>
    <loading-status-tem :noData="exchangeList.length == 0" :noDataText="'暂无相应内容'"></loading-status-tem>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
let isLoading = false;

export default {
  name: 'ExchangeCodeDetail',
  components: { loadingStatusTem, MySmallTabbar },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      type: -1,
      noneShow: true,
      exchangeList: [],
      is_page: false,
      page: 1,
      redeemCodeId: -1,
      barList: [{
        title: '已领取',
        index: 1
      }, {
        title: '已使用',
        index: 2
      }, {
        title: '已过期',
        index: 3
      }],
      fromType: '', //shareholder代表着从股东管理中的优惠券过来的
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    goCustomDetail(userId) {
      if (this.fromType == "shareholder") {
        this.$routerGo(this, "push", {
          path: "/homePage/shareholder/shCustomDetail",
          query: { userId: userId }
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/member/classmates/classmatesDetail",
          query: { type: 0, level: 1, memberId: userId }
        });
      }
    },
    changeType(type) {
      if (isLoading) { // 防止快速点击，导致接口请求未响应
        return;
      }
      // tab切换类型 已兑换  未兑换
      // this.isShowLoading = true;
      this.type = type;
      this.page = 1; // 切换类型 pageIndex重置
      this.exchangeList = [];
      this.getMore();
    },
    getMore() {
      let $this = this;
      if (isLoading) {
        return;
      }
      isLoading = true;
      let url = `Agent/agentCouponDetails?redeemCodeId=${this.redeemCodeId}&isCollect=${this.type}&page=${this.page}&limit=10`;
      if (this.fromType == "shareholder") {
        url = `shareholder/shareholderCouponDetails?redeemCodeId=${this.redeemCodeId}&isCollect=${this.type}&page=${this.page}&limit=10`;
      }
      utilJs.getMethod(global.apiurl + url, function (res) {
        isLoading = false;
        if ($this.page == 1) {
          $this.exchangeList = res.data;
        } else {
          $this.exchangeList = [...$this.exchangeList, ...res.data];
        }
        $this.page = res.current_page < res.last_page ? ($this.page + 1) : $this.page;
        $this.is_page = res.current_page < res.last_page;
      },
        failRes => {
          isLoading = false;
        }
      );
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.is_page = false;
    this.page = 1;
    this.exchangeList = [];
    this.redeemCodeId = this.$route.query.redeemCodeId;
    this.fromType = this.$route.query.fromType || '';
    this.type = 1;
    setDocumentTitle(this.fromType == "shareholder" ? "优惠券详情" : "优惠券领取明细");// eslint-disable-line
    this.getMore();
    this.wechatShare();
  },
  deactivated() { }
}
</script>
<style scoped>
em {
  font-style: normal;
}
.c-mt2 {
  margin-top: 0.05rem;
}
</style>


